<script setup lang="ts">
import { onUnmounted, ref, watch } from "vue";
import TablePro from "@/components/TablePro/TablePro.vue";
import type { TableProCloumn } from "@/typings";

interface Model {
  [key: string]: any;
}

type Props = {
  model: Model;
  data: any[];
  tree: any[];
  row: any;
};

const props = defineProps<Props>();
const rowData = ref<any>(props.row);
const modelData = ref<Model>(props.model);
const dataList = ref<any[]>([
  {
    step: "10.5",
    processContent: "应用规范",
    inspect: "",
    measureMethod: "",
    measureTool: "",
    code: "",
    remark: ""
  },
  {
    step: "",
    processContent: "应用规范",
    inspect: "",
    measureMethod: "",
    measureTool: "",
    code: "",
    remark: ""
  }
]);
const columns = ref<TableProCloumn[]>([
  {
    label: "工步",
    width: 100,
    align: "center",
    prop: "step"
  },
  {
    label: "工步内容",
    width: 500,
    prop: "processContent"
  },
  {
    label: "检测测量",
    align: "center",
    _children: [
      {
        label: "检点",
        align: "center",
        prop: "inspect"
      },
      {
        label: "量具名称",
        align: "center",
        prop: "measureMethod"
      },
      {
        label: "量具规格",
        align: "center",
        prop: "measureTool"
      },
      {
        label: "量具存货编码",
        align: "center",
        prop: "code"
      },
      {
        label: "备注",
        align: "center",
        prop: "remark"
      }
    ]
  }
]);
const stopWatch = watch(
  () => props.row,
  (val) => {
    if (!val) {
      rowData.value = props.tree[0];
    } else {
      rowData.value = val;
      Object.assign(modelData.value, val);
    }
  },
  {
    immediate: true
  }
);

const handleClick = (val: any) => {
  Object.assign(modelData.value, val);
  rowData.value = val;
};

const activeName = ref<string>("process");

onUnmounted(() => {
  stopWatch && stopWatch();
});
</script>

<template>
  <div class="process-layout">
    <div class="left-container">
      <ul class="ui-container">
        <li
          :class="{ 'li-item': true, active: rowData && rowData.processCode === item.processCode }"
          v-for="(item, index) in tree"
          :key="index"
          @click="handleClick(item)"
        >
          {{ item.processCode }} - {{ item.processName }}
        </li>
      </ul>
    </div>
    <div class="right-container">
      <el-form :model="modelData" :inline="true" label-width="auto">
        <el-form-item label="工艺规程编号" prop="procedureCode">
          <el-input :value="modelData.procedureCode" />
        </el-form-item>
        <el-form-item label="版次" prop="versions">
          <el-input :value="modelData.versions" />
        </el-form-item>
        <el-form-item label="零件名称" prop="partName">
          <el-input :value="modelData.partName" />
        </el-form-item>
        <el-form-item label="零件图号" prop="partMap">
          <el-input :value="modelData.partMap" />
        </el-form-item>
        <el-form-item label="工序号" prop="processCode">
          <el-input :value="modelData.processCode" />
        </el-form-item>
        <el-form-item label="工序名称" prop="processName">
          <el-input :value="modelData.processName" />
        </el-form-item>
        <el-form-item label="设备名称" prop="deviceName">
          <el-input :value="modelData.deviceName" />
        </el-form-item>
        <el-form-item label="设备型号" prop="deviceModel">
          <el-input :value="modelData.deviceModel" />
        </el-form-item>
        <el-form-item label="程序位置" prop="programPosition">
          <el-input :value="modelData.programPosition" />
        </el-form-item>
        <el-form-item label="工装名称" prop="toolName">
          <el-input :value="modelData.toolName" />
        </el-form-item>
        <el-form-item label="工装图号" prop="toolMap">
          <el-input :value="modelData.toolMap" />
        </el-form-item>
        <el-form-item label="点位数据路径" prop="programPosition">
          <el-input :value="modelData.programPosition" />
        </el-form-item>
      </el-form>
      <el-tabs v-model="activeName" tab-position="top" type="border-card">
        <el-tab-pane label="工序内容页" name="process">
          <TablePro :show-tools="false" :data="dataList" :columns="columns" />
        </el-tab-pane>
        <el-tab-pane label="程序单页" name="procedure">程序单页</el-tab-pane>
        <el-tab-pane label="装夹附图页" name="clamp">装夹附图页</el-tab-pane>
        <el-tab-pane label="检验附图页" name="inspect">检验附图页</el-tab-pane>
        <el-tab-pane label="打磨附图页" name="polish">打磨附图页</el-tab-pane>
        <el-tab-pane label="三坐标测量工序内容页" name="threeDimensional">三坐标测量工序内容页</el-tab-pane>
        <el-tab-pane label="关键工序明细表" name="pivotal">关键工序明细表</el-tab-pane>
        <el-tab-pane label="关键工序作业指导书" name="guide">关键工序作业指导书</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style scoped lang="scss">
.process-layout {
  width: 100%;
  height: 100%;
  display: flex;
  .left-container {
    width: 200px;
    height: 100%;
    border-right: 1px solid #dcdfe6;
    .ui-container {
      overflow-y: auto;
      overflow-x: hidden;
      width: 100%;
      height: 100%;
      .li-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 8px;
        height: 40px;
        cursor: pointer;
      }
      .li-item:hover {
        color: var(--el-menu-active-color);
        background-color: var(--el-menu-active-bg-color);
      }
      .active {
        color: var(--el-menu-active-color);
        background-color: var(--el-menu-active-bg-color);
      }
    }
  }
  .right-container {
    padding-left: 10px;
    height: 100%;
    width: calc(100% - 200px);
    .el-tabs {
      width: 100%;
      height: calc(100% - 150px);
    }
  }
}
</style>
